let leftMenuLi = document.querySelectorAll('.nav-menu > li');
let leftMenuUl = document.querySelectorAll('.nav-menu > ul');
// console.log(leftMenuUl);

for (let i = 0; i < leftMenuLi.length; i++) {
    let oDivContent = document.querySelector('.content');
    leftMenuLi[i].nextElementSibling.style.display = 'none';
    // console.log(leftMenuLi[i].nextElementSibling);
    leftMenuLi[i].onclick = function () {
        for (let j = 0; j < leftMenuLi.length; j++) {
            leftMenuLi[j].nextElementSibling.style.display = 'none';
        }
        //固定本页面导航栏样式
        leftMenuUl[3].style.display = 'block';
        leftMenuUl[3].children[1].style.backgroundColor = 'rgb(24, 144, 255)';
        leftMenuUl[3].children[1].style.color = '#fff';
        // console.log(this.nextElementSibling.firstElementChild);
        if (this.nextElementSibling.tagName == 'UL') {
            if (this.nextElementSibling.style.display == 'none') {
                this.nextElementSibling.style.display = 'block';
                for (let j = 0; j < this.nextElementSibling.children.length; j++) {
                    this.nextElementSibling.children[j].style.backgroundColor = 'black';
                    // console.log(this.nextElementSibling.children);
                    this.nextElementSibling.children[j].style.color = 'rgb(159, 159, 159)';
                }
                /* this.nextElementSibling.firstElementChild.style.backgroundColor = 'rgb(24, 144, 255)';
                this.nextElementSibling.firstElementChild.style.color = '#fff'; */
            } else {
                this.nextElementSibling.style.display = 'none';
            }
        }
        oDivContent.style.height = 800 + 'px';
        oDivContent.style.height = oDivContent.offsetHeight + this.nextElementSibling.offsetHeight + 'px';
    }
}


//固定本页面导航栏样式
leftMenuUl[3].style.display = 'block';
leftMenuUl[3].children[1].style.backgroundColor = 'rgb(24, 144, 255)';
leftMenuUl[3].children[1].style.color = '#fff';

for (let i = 0; i < leftMenuUl.length; i++) {
    for (let j = 0; j < leftMenuUl[i].children.length; j++) {
        leftMenuUl[i].children[j].onclick = function () {
            for (let j = 0; j < leftMenuUl[i].children.length; j++) {
                leftMenuUl[i].children[j].style.backgroundColor = 'black';
                leftMenuUl[i].children[j].style.color = 'rgb(159, 159, 159)';
                let currentSrc = event.target.getAttribute('data-src');
                // console.log(currentSrc);
                window.location.assign(currentSrc);
            }
            this.style.backgroundColor = 'rgb(24, 144, 255)';
            this.style.color = '#fff';
        }
    }
}


let data = [
    { id1: '20220704011', id2: '012022000001', position: '001-001-01-01', reason: '原因说明A要比其他原因的长一些，因为我要藏起来~', type: '删除', signer: '王志勇', signDate: '2022-7-4 17:14:12' },
    { id1: '20220704004', id2: '012022000002', position: '001-001-01-02', reason: '原因说明A', type: '新添', signer: '王志勇', signDate: '2022-7-4 17:14:12' },
    { id1: '20220704022', id2: '012022000003', position: '001-001-01-03', reason: '原因说明A', type: '删除', signer: '孙志立', signDate: '2022-7-4 17:14:12' },
    { id1: '20220704006', id2: '012022000004', position: '001-001-01-04', reason: '原因说明A', type: '新添', signer: '王志勇', signDate: '2022-7-4 17:14:12' },
    { id1: '20220704077', id2: '012022000005', position: '001-001-01-05', reason: '原因说明A', type: '删除', signer: '孙志立', signDate: '2022-7-4 17:14:12' },
    { id1: '20220703008', id2: '012022000006', position: '001-001-01-06', reason: '原因说明A', type: '新添', signer: '王志勇', signDate: '2022-7-4 17:14:12' },
    { id1: '20220704432', id2: '012022000007', position: '001-001-01-07', reason: '原因说明A', type: '新添', signer: '王志勇', signDate: '2022-7-4 17:14:12' },
    { id1: '20220703010', id2: '012022000008', position: '001-001-01-08', reason: '原因说明A', type: '删除', signer: '孙志立', signDate: '2022-7-4 17:14:12' },
    { id1: '20220704111', id2: '012022000009', position: '001-001-01-09', reason: '原因说明A', type: '删除', signer: '王志勇', signDate: '2022-7-4 17:14:12' }
];

/* let num = localStorage.getItem('dataNum');
let objNum = JSON.parse(num);

for (let i = 0; i < objNum; i++) {
    let addArr = localStorage.getItem('data1' + i);
    let obj = JSON.parse(addArr);
    console.log(obj);
} */
let addTextReason = localStorage.getItem('text1');
let addArr = localStorage.getItem('data1');
let addObj = JSON.parse(addArr);
console.log(addObj);
let newAddObj = { id1: '', id2: '', position: '', reason: '', type: '新添', signer: '', signDate: '' };


if (addObj) {
    newAddObj.id1 = addObj.id1;
    newAddObj.id2 = addObj.id2;
    newAddObj.position = addObj.position;
    newAddObj.reason = addTextReason;
    newAddObj.signer = addObj.signer;
    newAddObj.signDate = addObj.signDate;
    data.splice(0, 0, newAddObj);
}

let delArr = localStorage.getItem('dataDel');
let delObj = JSON.parse(delArr);
console.log(delObj);
let newDelObj = { id1: '', id2: '', position: '', reason: '', type: '删除', signer: '', signDate: '' };


if (delObj) {
    newDelObj.id1 = delObj.id1;
    newDelObj.id2 = delObj.id2;
    newDelObj.position = delObj.position;
    newDelObj.reason = '就是不想要了~~~';
    newDelObj.signer = delObj.signer;
    newDelObj.signDate = delObj.signDate;
    data.splice(0, 0, newDelObj);
}


let oTbody = document.querySelector('tbody');
let page = 1;
let count = 8;
let searchData = [];
let oSearchInp1 = document.querySelector('#getId1');
let oSearchInp2 = document.querySelector('#getId2');
let oSearchInp3 = document.querySelector('#getLevel');
let oSearchBtn = document.querySelector('#search');
let oResetBtn = document.querySelector('#reset');
let oPageDiv = document.querySelector('.next-page');
let oPrevDiv = oPageDiv.querySelector('#prev');
let oNextDiv = oPageDiv.querySelector('#next');
let oFirstDiv = oPageDiv.querySelector('#firstPage');
let oLastDiv = oPageDiv.querySelector('#lastPage');
//页面初始化的渲染功能
function render() {
    //查看搜索框的内容

    let data1 = [];
    let data2 = [];
    let str1 = oSearchInp1.value;
    let str2 = oSearchInp2.value;
    let str3 = oSearchInp3.value;
    searchData = [];

    if (str1.trim() == '') {
        data1 = data;
    } else {
        data1 = data.filter(function (v, i) {
            /* if (v.id1.includes(str1)) {
                return v;
            } */
            return v.id1.includes(str1);
        })
    }

    if (str2.trim() == '') {
        data2 = data1;
    } else {
        data2 = data1.filter(function (v, i) {
            return v.id2.includes(str2);
        })
    }

    if (str3.trim() == '') {
        searchData = data2;
    } else {
        searchData = data2.filter(function (v, i) {
            return v.level.includes(str3);
        })
    }

    // console.log(searchData);


    let renderArr = searchData.slice((page - 1) * count, page * count);

    oTbody.innerHTML = '';
    for (let i = 0; i < renderArr.length; i++) {
        let oTr = document.createElement('tr');
        oTr.innerHTML = `
    <td>${(page - 1) * 8 + i + 1}</td>
    <td>${renderArr[i].id1}</td>
    <td>${renderArr[i].id2}</td>
    <td>${renderArr[i].position}</td>
    <td>${renderArr[i].reason}</td>
    <td>${renderArr[i].type}</td>
    <td>${renderArr[i].signer}</td>
    <td>${renderArr[i].signDate}</td>
    `;
        oTr.children[4].title = oTr.children[4].innerText;
        oTbody.appendChild(oTr);
        // console.log(oTr);
    }

    //渲染页码
    let oPageDiv = document.querySelector('.next-page');
    let aPageBtn = oPageDiv.querySelectorAll('button');
    for (let i = 0; i < aPageBtn.length; i++) {
        oPageDiv.removeChild(aPageBtn[i]);
    }
    // console.log(aPageBtn);
    for (let i = Math.ceil(searchData.length / count); i >= 1; i--) {
        let oBtn = document.createElement('button');
        oBtn.innerHTML = `${i}`;/* 
        console.log(oBtn);
        console.log(oPageDiv.firstElementChild.nextElementSibling.nextElementSibling); */
        oPageDiv.insertBefore(oBtn, oPageDiv.firstElementChild.nextElementSibling.nextElementSibling);
        oPageDiv.style.width = 150 + oBtn.offsetWidth * Math.ceil(searchData.length / count) + 'px';
        if (i == page) {
            oBtn.style.backgroundColor = 'rgb(80,0,255)';
            oBtn.style.transition = 'all 0.2s linear';
        }
    }
    //给上一页下一页添加临界样式
    if (page == 1) {
        oPrevDiv.style.color = '#ccc';
        oPrevDiv.style.backgroundColor = '#99aaff';
        oFirstDiv.style.backgroundColor = '#99aaff';
    } else {
        oPrevDiv.style.backgroundColor = '#1890ff';
        oFirstDiv.style.backgroundColor = '#1890ff';
    }
    if (page == Math.ceil(searchData.length / count)) {
        oNextDiv.style.color = '#ccc';
        oNextDiv.style.backgroundColor = '#99aaff';
        oLastDiv.style.backgroundColor = '#99aaff';
    } else {
        oNextDiv.style.backgroundColor = '#1890ff';
        oLastDiv.style.backgroundColor = '#1890ff';
    }
}

//先渲染一次数据
render();

//给分页加事件
oPageDiv.addEventListener('click', changePage);
function changePage() {
    // console.log(event.target.tagName);
    if (event.target.tagName == 'BUTTON') {
        page = event.target.innerText;
        render();
    }
}

//下一页上一页功能
oPrevDiv.addEventListener('click', toPrev);
oNextDiv.addEventListener('click', toNext);
function toPrev() {
    if (page > 1) {
        page--;
        render();
    }
}
function toNext() {
    if (page < Math.ceil(searchData.length / count)) {
        page++;
        render();
    }
}

//到最后一页、第一页功能
oFirstDiv.addEventListener('click', toFirst);
oLastDiv.addEventListener('click', toLast);
function toFirst() {
    page = 1;
    render();
}
function toLast() {
    page = Math.ceil(searchData.length / count);
    render();
}

//搜索
oSearchBtn.addEventListener('click', searchFn);
function searchFn() {
    page = 1;
    render();
}

//改变head里input在聚焦与否时的值
let placeholderArr = ['请输入收件编号', '请输入档案号', '全部'];
let oContentHeadDiv = document.querySelector('.content-content-head');
let aContentHeadInp = oContentHeadDiv.querySelectorAll('input');
oContentHeadDiv.addEventListener('click', removePlaceholder);
function removePlaceholder() {
    // console.log(event.target);
    if (event.target.tagName == 'INPUT') {
        event.target.placeholder = '';
    }
}

for (let i = 0; i < aContentHeadInp.length; i++) {
    aContentHeadInp[i].onblur = function () {
        aContentHeadInp[i].placeholder = placeholderArr[i];
    }
}
//改变档案等级的下拉菜单
let oSvg = oContentHeadDiv.querySelector('.position svg');
oSvg.addEventListener('click', showSelect);
let oSelectUl = oSvg.nextElementSibling;
function showSelect() {
    if (oSelectUl.offsetHeight == 0) {
        oSelectUl.style.height = 58 + 'px';
        oSelectUl.style.border = '1px solid #ccc';
        oSelectUl.style.transition = 'all .3s linear';
        oSvg.style.transform = 'rotate(0deg)';
        oSvg.style.transition = 'all .3s linear';
    } else {
        oSelectUl.style.height = 0 + 'px';
        oSelectUl.style.border = '';
        oSelectUl.style.transition = 'all .3s linear';
        oSvg.style.transform = 'rotate(-90deg)';
        oSvg.style.transition = 'all .3s linear';
    }
}

document.body.addEventListener('click', hideSelect);

function hideSelect() {
    if (event.target.tagName != 'svg' && event.target.tagName != 'use') {
        oSelectUl.style.height = 0 + 'px';
        oSelectUl.style.border = '';
        oSelectUl.style.transition = 'all .3s linear';
        oSvg.style.transform = 'rotate(-90deg)';
        oSvg.style.transition = 'all .3s linear';
    }
}

oSelectUl.addEventListener('click', fillInFn);
function fillInFn() {
    if (event.target.tagName = 'LI') {
        this.parentElement.firstElementChild.value = event.target.innerText;
        showSelect();
    }
}

//重置功能
oResetBtn.addEventListener('click', resetFn);
function resetFn() {
    for (let i = 0; i < aContentHeadInp.length; i++) {
        aContentHeadInp[i].value = '';
        aContentHeadInp[i].placeholder = placeholderArr[i];
    }
    window.localStorage.clear();
    render();
    location.reload();   //将清除效果展示出来
}

//radio选中取消
let aInpRadio = oTbody.querySelectorAll('input');
let isChecked = true;
oTbody.addEventListener('click', cancelChecked);

function cancelChecked() {
    if (event.target.tagName == 'INPUT') {
        // console.log(event.target.checked);
        if (event.target.checked) {
            event.target.isChecked = true;
        } else {
            event.target.isChecked = false;
        }
        event.target.onclick = function () {
            if (event.target.isChecked) {
                event.target.checked = false;
                event.target.isChecked = false;
            } else {
                event.target.checked = true;
                event.target.isChecked = true;
            }
        }
        /* for (let i = 0; i < aInpRadio.length; i++) {
            console.log(aInpRadio[i].checked);
        } */
        // console.log(event.target.isChecked);
    }
}

//通过左上角图标改变左侧nav样式
let oImgNavControl = document.querySelector('.content-header-top div:first-child img');
let oLeftNav = document.querySelector('.left-nav');
oImgNavControl.addEventListener('click', ifShow);

function ifShow() {
    if (oLeftNav.offsetWidth == 0) {
        oLeftNav.style.width = 260 + 'px';
        oImgNavControl.style.transform = 'rotateY(0deg)';
        oLeftNav.style.transition = 'all .5s linear';
        oImgNavControl.style.transition = 'all .5s linear';
    } else {
        oLeftNav.style.width = 0 + 'px';
        oImgNavControl.style.transform = 'rotateY(180deg)';
        oLeftNav.style.transition = 'all .5s linear';
        oImgNavControl.style.transition = 'all .5s linear';
    }
}

window.addEventListener('resize', changeWidth);
changeWidth();
function changeWidth() {
    if (oLeftNav.parentElement.clientWidth >= 1440) {
        oContentHeadDiv.style.width = '90%';
        oContentHeadDiv.style.transition = 'all .5s linear';
        oLeftNav.style.width = 260 + 'px';
        oImgNavControl.style.transform = 'rotateY(0deg)';
        oLeftNav.style.transition = 'all .5s linear';
        oImgNavControl.style.transition = 'all .5s linear';
    } else {
        oContentHeadDiv.style.width = '95%';
        oContentHeadDiv.style.transition = 'all .5s linear';
        oLeftNav.style.width = 0 + 'px';
        oImgNavControl.style.transform = 'rotateY(180deg)';
        oLeftNav.style.transition = 'all .5s linear';
        oImgNavControl.style.transition = 'all .5s linear';
    }
}